<!--
 * @Author: 秦福凯
 * @Date: 2024-08-01 09:00:30
 * @Description: 增删改查模板
 * @FilePath: \研发云实验小学OA\sx-school-oa\sx-school-oa\src\components\common\mode\mode.vue
-->
<template>
  <div class="u-search-header" >
    <el-form :model="search">
      <el-form-item label="筛选输入框" class="u-f-fl" label-width="88px">
        <u-input v-model="search.param.search.aaa"></u-input>
      </el-form-item>
      <el-form-item label="筛选下拉" class="u-f-fl"  label-width="88px">
        <u-select @change="getSearch"  v-model="search.param.search.aaa" :data="typeData" style="width: 200px;"></u-select>
      </el-form-item>
      <el-form-item  class="u-f-fl" label-width="28px">
        <u-button type="primary" icon="Search" @click="getSearch">查询</u-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="u-search-container">
    <div class="u-h-100">
      <div class="u-btns-box">
        <u-button type="primary" plain icon="Plus" @click="add">新增</u-button>
        <u-button type="danger" icon="Delete" @click="delateD">删除</u-button>
      </div>
        <u-table v-loading="tabLaoding" :colunm="colunm" :data="TabData" @link="tabEvent" @selection-change="(data) => TabSelData.splice(0, TabSelData.length, ...data)"></u-table>
        <div class="u-common-pagination">
          <u-page-nation @pagination="paginationE" :total="total" :page="search.param.page"></u-page-nation>
        </div>
    </div>
  </div>
  <!-- 弹窗 -->
  <u-dialog :show="dialogShow" :title='dialogTitle' @close="dialogClose" width="70%"  @submit="submit">
    <u-form ref="refform" v-loading="formloading" :element="formList" :form="form" >
      <template #img>
        <el-image style="height: 200px;width: 200px;border: 1px solid #666;" :src="imgsrc" :preview-src-list="[imgsrc]" fit="cover"></el-image>
      </template>
    </u-form>
   </u-dialog>
</template>

<script setup>
import { ref, reactive,onMounted} from 'vue'
// 导入接口地址
import Tea_grop_servic from '@/api/TeachersManagement'

// 导入公共数据
import { useTecDataStore } from "@/store/teachinginstrument/index.js";
// 导入分页相关混合
import {PageMethod} from '@/components/common/mixin.ts'

// 公共数据取值
const TecDataStore = useTecDataStore()
const {page,pageSize,pageChane,} = PageMethod()

onMounted(() => {
  getSearch()
})

// 新增
function add(){
  form.id = ''
  dialogShow.value = true
}
// 删除
function delateD(){
  if(TabSelData.length == 0){
    ElMessage.warning('请选择要删除的的数据!')
    return
  }
  ElMessageBox.confirm(
    '确认删除选中数据?删除将不可恢复请谨慎操作',
    '系统提示',
    {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    }
  ).then(() =>{
    let ids = TabSelData.map(item => item.id).join(',')
    Tea_grop_servic.cancelDevice({...TecDataStore.comObj,param:ids}).then(res =>{
      if(res.data.code == 200){
        ElMessage.success('删除成功!')
        getSearch()
      }else{
       ElMessage.warning(res.data.msg)
      }
  })
  })
}

// 查询相关变量
let search = reactive({
  ...TecDataStore.comObj,
  param:{
    page:page,
    pageSize:pageSize,
    search:{
    }
  }
})
let tabLaoding = ref(false)
let total = ref(0)
let colunm = reactive([
  {type:'selection'},
  {type:'index',label:'编码',width:60},
  {label:'设备编号',key:'deviceNo',width:120},
  {label:'名称规格',key:'deviceName',minWidth:160,align:'left',ctype:'link'},
  {label:'设备录入数量',key:'deviceNum',width:120},
  {label:'库存',key:'quantity',width:80},
  {label:'类别',key:'typeId',width:160},
  {label:'存放地',key:'lockerName',width:160},
  {label:'购买日期',key:'buyDate',width:160},
  {label:'生产厂商',key:'manufacturer',width:160},
])
let TabData = reactive([{q1:'设备查询',deviceName:'光碟',unit:'张'}])

// 查询
function getSearch(){
  return
  tabLaoding.value = true
  Tea_grop_servic.sblistPage(search).then(res =>{
    tabLaoding.value = false
    if(res.data.code == 200){
      TabData = res.data.data.records
      total.value = res.data.data.total
      TabData.forEach(item =>{
      })
    }else{
      ElMessage.warning(res.data.msg)
    }
  })
}

// 分页组件切换
function paginationE(val){
  search.param.page = val.page
  search.param.pageSize = val.limit
  getSearch()
}

// 表格选择的数据
let TabSelData = reactive([])
function tabSel(val){
  TabSelData = val
}

// 表格点击事件
function tabEvent(key,value,row){
  if(key == 'deviceName'){
    dialogShow.value = true
    getEditData(row)
  }
}
// 获取回显数据
function getEditData(val){
  return
  form.id = val.id
  formloading.value = true
  Tea_grop_servic.getDeviceById({...TecDataStore.comObj,param:val.id}).then(res =>{
    formloading.value = false
    if(res.data.code == 200){
      let data = res.data.data
      for(let i in form){
        if(data[i]){
          form[i] = data[i]
        }
      }
    }else{
      ElMessage.warning(res.data.msg)
    }
  })
}

// 弹窗相关参数
let dialogShow = ref(false)
let dialogTitle = ref('弹窗标题')

// 弹窗里的表单参数
let form = reactive({
  id:"",
})
let formList = reactive([
  {label:'设备编号:',key:'deviceNo',type:'input',placeholder:"",sp:8,disabled:true},
  {label:'设备来源:',key:'channelSource',type:'select',sp:8,data:[]},
  {label:'存放柜:',key:'lockerId',type:'select',sp:8,data:[],placeholder:"先选类别再选存放柜",re:true},
  {label:'层数:',key:'layerNum',type:'input',sp:8,re:true},
  {label:'低值危化:',key:'lowHazardType',type:'select',sp:24,disabled:true,re:true},
  {label:'设备略图:',key:'deviceImg',type:'upload',placeholder:"",sp:16,},
  {label:'',key:'img',type:'slot',sp:8,lw:'0'},
  {label:'备注说明',key:'explanation',type:'textarea',sp:24,placeholder:"品牌,型号参数,配置其它说明",},
])
const refform = ref(null)
let formloading = ref(false)
let imgsrc = ref(null)

// 弹窗提交
function submit(){
  refform.value.soform.validate((vali) =>{
    if(!vali){
      ElMessage.warning('请将表单填写完整!')
    }else{
      let parmas = {
        ...TecDataStore.comObj,
        param:{
          ...JSON.parse(JSON.stringify(form)),
        }
      }
     const url = parmas.param.id == '' || parmas.param.id == undefined ? 'add' : 'update'
      return
      formloading.value = true
      Tea_grop_servic[url](parmas).then(res =>{
        formloading.value = false
        if(res.data.code == 200){
          ElMessage.success(res.data.msg)
          dialogShow.value = false
          getSearch()
        }else{
          ElMessage.warning(res.data.msg)
        }
    })
    }
  })
}

// 弹窗关闭
function dialogClose(){
  // 清理表单缓存
  refform.value.soform.resetFields()
  dialogShow.value = false
}

</script>
<style lang='scss' scoped>

</style>